<!-- 切换按钮 -->
<ul class="flex-start tab">
    <li class="select">作者关联</li>
    <li>机构关联</li>
    <li>关键词关联</li>
    <li>相似文献关联</li>
</ul>
<div class="wxBox" style="position: relative;">
    <span style="position: absolute;top: 12px;left: 47%;" id='mention'><img src="/image/standard/loading.gif"
            alt=""></span>
    <ul class="" style="padding: 14px 0;font-size: 14px;">
        <script type="text/html" id='wxList'>
        <li><em>[{{:~showNum(#data,#index)}}]</em> <span class="titleName" title="{{:#data['title']}}" data-id='{{:#data["sysID"]}}' data-source='{{:#data["source"]}}' data-fileName='{{:#data["fileName"]}}' data-tableName='{{:#data["tableName"]}}'>{{:#data['title']}}</span> <span>{{:#data['field']}}</span> <span class="keyword">{{:#data['keyword']}}</span> <span class="year">{{:#data['year']}}</span> </li>
        </script>
    </ul>
</div>
<style>
    .container .tab {
        width: 100%;
        margin-top: 20px;
        border-bottom: 1px solid #4087ff;
    }

    .container .wxBox {
        min-height: 160px;
        border-bottom: 1px solid #4087ff;
        text-align: left;
        word-break: break-all;
        margin-bottom: 20px;
    }

    .wxBox .titleName {
        max-width: 940px;
        display: inline-block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: #506697;
        vertical-align: bottom;
        cursor: pointer;
    }

    .wxBox .titleName:hover {
        color: blue;
    }

    .container .tab li {
        height: 30px;
        padding: 0 1%;
        line-height: 30px;
        font-size: 13px;
        color: #333;
        font-family: "Microsoft yahei", serif;
        border-radius: 2px;
        background-color: #fff;
        cursor: pointer;
    }

    .container .tab li:not(:nth-child(1)) {
        margin-left: 1%;
    }

    .container .tab li:hover {
        text-shadow: 0px 0px 1px #ffffff;
    }

    /* 选中样式 */
    .container .tab .select {
        color: #fff;
        background-color: #4087ff;
    }

    .wxBox ul li {
        position: relative;
        z-index: 1;
        padding: 1px 26px 1px 45px;
        line-height: 2;
        zoom: 1;
        color: #666;
    }

    .wxBox ul li em {
        position: absolute;
        left: 1px;
        top: 1px;
        font-style: normal;
        vertical-align: middle;
    }
</style>
<script type="text/javascript">
    function getList(url, value, name) {
        var data = {};
        for (var i = 0; i < value.length; i++) {
            for (var j = 0; j < name.length; j++) {
                data[name[j]] = value[i];
            }
        }
        $('#mention').html('<img src="/image/standard/loading.gif" alt="">');

        shared.ajaxPost(url, data, function (res) {
            if (res) {
                $('#mention').html('');
                !res.length && $('#mention').html('暂无数据');
            } else {
                res = [];
                $('#mention').html('暂无数据');
            }
            core.useTemplateAuto('wxList', res, {
                showNum: function (data, index) {
                    return index + 1;
                }
            })
        })

    }
    $(function () {
        $('.wxBox').click(function (e) {
            if ($(e.target).hasClass('titleName')) {
                var dataDetail = {};
                dataDetail.dbTable = $(e.target).attr('data-tableName');
                dataDetail.sysID = $(e.target).attr('data-id');
                dataDetail.fileName = $(e.target).attr('data-fileName');
                dataDetail.dbsource = $(e.target).attr('data-source');
                //插入浏览量
                pageData.toDetail(dataDetail);
            }

        })
        $('.tab li').click(function (e) {
            $('.tab li').each(function (index, item) {
                if ($(e.target).index() == index) {
                    $(e.target).addClass('select')
                    if (!index) {
                        getList(config.getResultByAuthor, [authorRelate], ['author'])
                    } else if (index == 1) {
                        getList(config.getResultByOrganization, [organRelate], ['literatureSources'])
                    } else if (index == 2) {
                        getList(config.getResultByKeyword, [keyWordRelate], ['keyStr'])
                    } else if (index == 3) {
                        getList(config.getRalatedArticlesList, [vsmen, vsm], ['vsmen', 'vsm'])
                    }

                } else {
                    $(item).removeClass('select')
                }
            })
        })
    })
</script>